<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>实训第六次课仿apple官网</title>
		<link rel="stylesheet" type="text/css" href="css/apple-ipad.css"/>
	</head>
	<body>
		<div class="wideBox">
			<div class="header">
				<div class="adv-wrapper">
					<div class="adv-wrapper-text">&lt;广告&gt;</div>
				</div>
				<div class="navbar">
					<ul class="navbar-icon">
						<li>
							<a href="mac-apple.html"><img src="img/svg/icon_image_large.svg"/></a>
						</li>
						<li>
							<a href="mac-apple.html">Mac</a>
						</li>
						<li>
							<a href="iphone-ipad.html">iPad</a>
						</li>
						<li>
							<a href="iphone-apple.html">iPhone</a>
						</li>
						<li>
							<a href="watch.html">Watch</a>
						</li>
						<li>
							<a href="music.html">Music</a>
						</li>
						<li>
							<a href="newtechnology.html">技术支持</a>
						</li>
						<li>
							<a href="#"><img src="img/svg/search_image_large.svg"/></a>
						</li>
						<li>
							<a href="#"><img src="img/svg/bag_image_large.svg"/></a>
						</li>
					</ul>
				</div>
				<div class="product">
					<ul>
						<li>
							<a href="" class="product-icon">
								<img src="img/pad-svg/ipadpro_light_large.svg">
								<span style="color: black;">ipad Pro</span>
								<span style="color: #e85d00;">新款</span>
							</a>
						</li>
						<li>
							<a href="" class="product-icon">
								<img src="img/pad-svg/ipad_large.svg" />
								<span style="color: black;">ipad</span>
							</a>
						</li>
						<li>
							<a href="" class="product-icon">
								<img src="img/pad-svg/ipadmini_large.svg" />
								<span style="color: black;">ipad mini4</span>
							
							</a>
						</li>
						<li>
							<a href="" class="product-icon">
								<img src="img/pad-svg/ipad_ios10_large.svg" />
								<span style="color: black;">iOS 10</span>
							
							</a>
						</li>
						<li>
							<a href="" class="product-icon">
								<img src="img/pad-svg/ipad_acc_large.svg" />
								<span style="color: black;">配件</span>
							
							</a>
						</li>
						<li>
							<a href="" class="product-icon">
								<img src="img/pad-svg/ipad_comp_large.svg">
								<span style="color: black;">机型比较</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="content">
				<div class="iMacProBoder">
					<div class="iMacPro">
						<h2 style="font-size: 80px;font-weight: 500;line-height: 1;color: black;">iPad Pro</h2>
						<h2 style="font-size: 40px;font-weight: 500;letter-spacing: .008em;color: black;">不止能做到，</h2>
						<h2 style="font-size: 40px;font-weight: 500;letter-spacing: .008em;color: black;">还能做到更好。</h2>
						<p><a href="">进一步了解></a><a style="margin-left: 40px;" href="">购买></a></p>
						
					</div>
					<div class="ipadpro">
						<figure class="image-imacpro"></figure>
					</div>
				</div>
				<div style="height: 800px;">
					<div class="iPadPencil">
					<h2 style="font-size: 80px;font-weight: 500;line-height: 1;color: black;">Apple Pencil</h2>
					<h2 style="font-size: 40px;font-weight: 500;letter-spacing: .008em;color: black;">为iPad Pro而来</h2>
					<p><a href="">进一步了解></a><a style="margin-left: 40px;" href="">购买></a></p>
					<img src="img/pad-jpg/pencil_large.jpg" style="margin-top: 40px;"/>
					
				</div>
				<div class="iPadsmart">
					<img src="img/pad-jpg/smart_keyboard_large.jpg" />
					<h2 style="font-size: 80px;font-weight: 500;line-height: 1;color: black;">Smart KeyBoard</h2>
					<h2 style="font-size: 40px;font-weight: 500;letter-spacing: .008em;color: black;">为iPad Pro而来</h2>
					<p><a href="">进一步了解></a><a style="margin-left: 40px;" href="">购买></a></p>
				</div>
				</div>
				
				<div class="iMacBoder">
					<h2 style="font-size: 80px;font-weight: 500;line-height: 1;color: black;">iPad</h2>
					<h2 style="font-size: 40px;font-weight: 500;letter-spacing: .008em;color: black;">方寸间，乐趣全开。</h2>
					<p><a href="">进一步了解></a><a style="margin-left: 40px;" href="">购买></a></p>
					<img src="img/pad-jpg/ipad_large.jpg" style="margin-top: 30px;" />
				</div>
				<div style="height: 600px;">
					<div class="ipadapp">
					<img src="img/pad-png/icon_appstore_large.png" style="margin-left: 44%;" />
					<h2 style="font-size: 40px;font-weight: 500;letter-spacing: .008em;color: black;">上百万款APP，</h2>
					<h2 style="font-size: 40px;font-weight: 500;letter-spacing: .008em;color: black;">专为iPad而设计。</h2>
					<h2 style="font-size: 15px;font-weight: 500;letter-spacing: .008em;color: black;">App Store 中有上百万款 app*，都是针对 iPad 宽大精美的 Retina</h2>
				    <h2 style="font-size: 15px;font-weight: 500;letter-spacing: .008em;color: black;">显示屏而设计。你喜欢做的事，几乎都有相应的 iPad app 能帮到你。</h2>
				    <p><a style="margin-left: 40px;" href="">访问App Store</a></p>
				    <img src="img/pad-jpg/apps_availability_large (1).jpg" />
				    </div>
				<div class="iPadsmart">
					<img src="img/pad-png/icon_swift_large.png" style="margin-left: 44%;" />
					<h2 style="font-size: 40px;font-weight: 500;letter-spacing: .008em;color: black;">Swift Playgrounds</h2>
					<h2 style="font-size: 15px;font-weight: 500;letter-spacing: .008em;color: black;">用 iPad 来学编程，</h2>
				    <h2 style="font-size: 15px;font-weight: 500;letter-spacing: .008em;color: black;">学起来还乐趣十足。</h2>
				    <p><a href="">进一步了解></a></p>
				    <img src="img/pad-png/ipad_playgrounds_large.png" style="margin-left: 20%;" />
				</div>
					
				</div>
				<div style="height: 550px;">
					<img src="img/pad-jpg/ios11_large.jpg" style="margin-left: 10%;margin-top: -220px;" />
					
				</div>
				<div class="ipadnew">
					<img src="img/pad-png/icon_ios11_large.png" style="margin-left: 48%;" />
					<h2 style="font-size: 40px;font-weight: 500;letter-spacing: .008em;color: black;">让iPad实现里程碑式飞跃。</h2>
					<h2 style="font-size: 15px;font-weight: 500;letter-spacing: .008em;color: black;">iOS 11 为 iPad 注入了前所未有的活力。新的特色和功能让你可以快速、轻松</h2>
				    <h2 style="font-size: 15px;font-weight: 500;letter-spacing: .008em;color: black;">地处理更多事务，为你带来功能强大且个人化的 iPad 使用体验。</h2>
				    <p><a href="">进一步了解iOS 11></a></p>
				    <div class="date">今秋推出</div>
				</div>
				<div class="ipadcompare">
					<h2 style="font-size: 40px;font-weight: 500;letter-spacing: .008em;color: black;margin-left: 140px;">iPad机型比较</h2>
					<a href="" style="margin-left: 140px;">找到适合你的iPad></a>
					
				</div>
				<div style="height: 343px;margin-top: 100px;">
					<div class="ipadpay">
						<img src="img/pad-png/pickup_icon_large.png" style="margin-left: 48%;" />
						<h2 style="font-size: 15px;font-weight: 500;letter-spacing: .008em;color: black;"><b>分期付款</b></h2>
						<h2 style="font-size: 15px;font-weight: 500;letter-spacing: .008em;color: black;">符合条件的信用卡用户可选择</h2>
						<h2 style="font-size: 15px;font-weight: 500;letter-spacing: .008em;color: black;">灵活的分期付款方式。</h2>
						<p><a href="">进一步了解></a></p>
					</div>
					<div class="iapsend">
						<img src="img/pad-png/shipping_icon_large.png" style="margin-left: 48%;" />
						<h2 style="font-size: 15px;font-weight: 500;letter-spacing: .008em;color: black;"><b>免费送货</b></h2>
						<h2 style="font-size: 15px;font-weight: 500;letter-spacing: .008em;color: black;">享受免费送货上门服务。</h2>
						<p><a href="">进一步了解></a></p>
					</div>
				</div>
				<div class="ipadpeijian">
					<h2 style="font-size: 40px;font-weight: 500;letter-spacing: .008em;color: black;">iPad配件</h2>
					<h2 style="font-size: 18px;font-weight: 500;letter-spacing: .008em;color: black;">助你发掘iPad的精彩。</h2>
					<p><a href="">选购iPad配件></a></p>
					
				</div>
				<div class="ipadedcat">
					<div class="ipadedcatnew">
						<h2 style="font-size: 40px;font-weight: 500;letter-spacing: .008em;color: white;">iPad教育应用</h2>
						<h2 style="font-size: 18px;font-weight: 500;letter-spacing: .008em;color: white;">在课堂上大大转变学习、授课和创造的方式。</h2>
					<p><a href="" style="color: white;">进一步了解iPad教育应用></a></p>
					<p><a href="" style="color: white;">教育选购></a></p>
					</div>
					
				</div>
				<div class="ipadshop">
					<div class="ipadshopnew">
						<h2 style="font-size: 40px;font-weight: 500;letter-spacing: .008em;color: white;">iPad商务应用</h2>
						<h2 style="font-size: 18px;font-weight: 500;letter-spacing: .008em;color: white;">多种多样的可能性，让你的工作方式从此大不相同。</h2>
					<p><a href="" style="color: white;">进一步了解iPad商务应用></a></p>
					<p><a href="" style="color: white;">商务选购></a></p>
					</div>
					
				</div>

		</div>
<div class="footer">
				<div class="foot-middle-content">
					<div class="foot-link-list">
						<div>
							<span class="icon-apple" style="margin-top: 16px;"><img src="img/mac-svg/icon_large.svg"/></span>
							<span> > </span>
							<span> iPad</span>
						</div>
						<div class="foot-link-list-content">
							<ul class="foot-list-box">
								<li>
									<ul>
										<li><h5>选购及了解</h5></li>
										<li><a href="#">Mac</a></li>
										<li><a href="#">iPad</a></li>
										<li><a href="#">iPhone</a></li>
										<li><a href="#">Watch</a></li>
										<li><a href="#">Music</a></li>
										<li><a href="#">iTunes</a></li>
										<li><a href="#">iPod</a></li>
										<li><a href="#">配件</a></li>
										<li><a href="#">App Store 充值卡</a></li>
									</ul>
								</li>
								<li>
									<ul>
										<li><h5>App Store 商店</h5></li>
										<li><a href="#">查找零售店</a></li>
										<li><a href="#">Genius Bar 天才吧</a></li>
										<li><a href="#">Today at Apple</a></li>
										<li><a href="#">Apple 夏令营</a></li>
										<li><a href="#">Field Trip 课外活动</a></li>
										<li><a href="#">Apple Store App</a></li>
										<li><a href="#">翻新和优惠</a></li>
										<li><a href="#">分期付款</a></li>
										<li><a href="#">重复使用和循环利用</a></li>
										<li><a href="#">订单状态</a></li>
										<li><a href="#">选购帮助</a></li>
									</ul>
								</li>
								<li>
									<ul>
										<li><h5>教育应用</h5></li>
										<li><a href="#">Apple 与教育</a></li>
										<li><a href="#">高校师生选购</a></li>
									</ul>
									<ul>
										<li><h5>商务应用</h5></li>
										<li><a href="#">Apple 与商务</a></li>
										<li><a href="#">商务选购</a></li>
									</ul>
								</li>
								<li>
									<ul>
										<li><h5>账户</h5></li>
										<li><a href="#">管理你的Apple ID</a></li>
										<li><a href="#">Apple Store 账户</a></li>
										<li><a href="#">iCloud.com</a></li>
										<li><a href="#"></a></li>
									</ul>
									<ul>
										<li><h5>Apple 价值观</h5></li>
										<li><a href="#">辅助功能</a></li>
										<li><a href="#">环境责任</a></li>
										<li><a href="#">隐私</a></li>
										<li><a href="#">供应商责任</a></li>
									</ul>
								</li>
								<li>
									<ul>
										<li><h5>关于 Apple</h5></li>
										<li><a href="#">Newsroom</a></li>
										<li><a href="#">Apple 管理层</a></li>
										<li><a href="#">工作机会</a></li>
										<li><a href="#">活动</a></li>
										<li><a href="#">联系 Apple</a></li>
									</ul>
								</li>
							</ul>
						</div>	
						<p style="margin-top: 36%;">更多选购方式：前往 <a>Apple Store 零售店</a>，致电 400-666-8800 或查找在你附近的<a>授权经销商</a>。</p>
					</div>
					<div class="foot-copyright">
							<span>Copyright ? 2017 Apple Inc. 保留所有权利。</span>
							<div class="illegel-info">
								<span>隐私政策</span>
								<span>|</span>
								<span>使用条款</span>
								<span>|</span>
								<span>销售政策</span>
								<span>|</span>
								<span>法律信息</span>
								<span>|</span>
								<span>网站地图</span>
							</div>
							<div class="country-info" title="请选择国家和地区">
								<img src="img/mac-img/16.png"/>
								<span>中国</span>
							</div>
						</div>
				</div>
			</div>
				<div class="backup" id="backup">
						<a href="#header" class="backup-icon">^</a> 
					</div>
				</div>
		<script type="text/javascript" src="js/backup.js" ></script>
	</body>
</html>
